<template>
  <div class="profiles">
    <!-- <div v-for="(item, index) in profiles" :key="index" class="content">
      <div class="box"></div>
    </div> -->
    <div @click="left" class="before">
      <svg
        t="1612150103244"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="1073"
        width="32"
        height="32"
      >
        <path
          d="M532.526499 904.817574L139.506311 511.797385 532.526499 118.777197c12.258185-12.258185 12.432147-32.892131-0.187265-45.51052-12.707416-12.707416-32.995485-12.703323-45.511543-0.187265L75.166957 484.739123c-7.120165 7.120165-10.163477 17.065677-8.990768 26.624381-1.500167 9.755178 1.5104 20.010753 8.990768 27.491121l411.660734 411.660734c12.258185 12.258185 32.892131 12.432147 45.511543-0.187265 12.707416-12.707416 12.7023-32.995485 0.187265-45.51052z"
          p-id="1074"
          fill="#707070"
        ></path>
      </svg>
    </div>
    <div class="contents">
      <div class="content" v-for="(item, index) in profiles" :key="index">
        <div
          class="box animate__animated "
          v-if="currentIndex === index"
          :class="onClick ? 'animate__bounceInRight' : 'animate__bounceInLeft'"
        >
          <div class="title">{{ currentData.title }}</div>
          <div class="des">{{ currentData.des }}</div>
          <div class="skills">{{ currentData.skills }}</div>
          <div class="result">{{ currentData.result }}</div>
          <div>{{ currentIndex }}</div>
        </div>
      </div>
    </div>
    <div @click="right" class="after">
      <svg
        t="1612150140004"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="1794"
        width="32"
        height="32"
      >
        <path
          d="M492.675886 904.817574L885.696074 511.797385 492.675886 118.777197c-12.258185-12.258185-12.432147-32.892131 0.187265-45.51052 12.707416-12.707416 32.995485-12.703323 45.511543-0.187265l411.660734 411.660734c7.120165 7.120165 10.163477 17.065677 8.990768 26.624381 1.500167 9.755178-1.5104 20.010753-8.990768 27.491121L538.374694 950.515359c-12.258185 12.258185-32.892131 12.432147-45.511543-0.187265-12.707416-12.707416-12.703323-32.995485-0.187265-45.51052z"
          p-id="1795"
          fill="#707070"
        ></path>
      </svg>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, ref } from "vue";

export default defineComponent({
  props: {
    profiles: Array,
  },
  setup(props) {
    const onClick = ref(false);
    const currentIndex = ref(0);
    const currentData = computed(() => {
      return props.profiles ? props.profiles[currentIndex.value] : null;
    });
    const size = props.profiles?.length || 0;
    function right() {
      onClick.value = true;
      currentIndex.value++;
      if (currentIndex.value >= size) {
        currentIndex.value = 0;
      }
    }
    function left() {
      onClick.value = false;
      currentIndex.value--;
      //console.log(currentData);
      if (currentIndex.value < 0) {
        currentIndex.value = size - 1;
      }
    }
    function autoPlay() {
      setInterval(() => {
        right();
      }, 7000);
    }
    onMounted(() => {
      autoPlay();
    });
    return { props, currentIndex, currentData, left, right, onClick };
  },
});
</script>

<style scoped lang="scss">
.profiles {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 1px solid red;
  height: 50%;
  //position: relative;
  .contents {
    position: relative;
    width: 85%;
    height: 100%;
  }
  .content {
    position: absolute;
    left: 0;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    bottom: 0;
    margin: 0 auto;
    overflow: hidden;
    .box {
      background: aliceblue;
      color: black;
    }
  }
}
@media screen and(min-width:576px) {
  .content {
    max-width: 540px;
  }
}
@media screen and(min-width:768px) {
  .content {
    max-width: 700px;
  }
}
@media screen and (min-width: 992px) {
  .content {
    max-width: 960px;
  }
}
</style>
